<template>
    <div class="page">
        <!-- 头部导航 -->
        <div class="nav-header">
            <div class="left-icon">
                <van-icon name="arrow-left" size="34" @click="onClickLeft" />
            </div>
            <div class="title">垃圾分类助手</div>
            <div class="share-btn">分享</div>
        </div>

        <!-- 内容区域 -->
        <div class="content">
            <!-- 顶部banner -->
            <div class="banner">
                <div class="banner-text">
                    <h1>垃圾分类助手</h1>
                    <p>掌握分类小技巧 共享美食与环保</p>
                </div>
                <div class="banner-image">
                    <div class="mascot-placeholder"></div>
                </div>
            </div>

            <!-- 搜索框 -->
            <div class="search-box">
                <van-search
                    v-model="searchValue"
                    placeholder="请输入正确名称（包括材质）"
                    shape="round"
                    @search="onSearch"
                    @click="onSearchBoxClick"
                    :style="{ fontSize: '30px' }"
                    readonly
                />
            </div>

            <!-- 快捷搜索标签 -->
            <div class="quick-tags">
                <div class="tag" v-for="(tag, index) in quickTags" :key="index" @click="onTagClick(tag)">
                    {{ tag }}
                </div>
            </div>

            <!-- 外卖包装物投放指南 -->
            <div class="guide-section">
                <h2>外卖包装物投放指南</h2>
                <p>沾有油污的一次性餐盒、杯子、纸巾、餐具包、刀叉勺、吸管、牙签、铝箔/锡纸包装、无纺布袋、塑料袋等都是其他垃圾/干垃圾；干净的塑料餐盒、塑料杯可以投递到可回收物。</p>
            </div>

            <!-- 分类标签导航 -->
            <div class="category-tabs">
                <div class="tab-item" :class="{ active: activeTab === 0 }" @click="activeTab = 0">
                    <div class="icon-wrap kitchen-waste">
                        <van-icon name="clock-o" />
                    </div>
                    <span>厨余垃圾</span>
                </div>
                <div class="tab-item" :class="{ active: activeTab === 1 }" @click="activeTab = 1">
                    <div class="icon-wrap other-waste">
                        <van-icon name="delete-o" />
                    </div>
                    <span>其他垃圾</span>
                </div>
                <div class="tab-item" :class="{ active: activeTab === 2 }" @click="activeTab = 2">
                    <div class="icon-wrap recyclable">
                        <van-icon name="exchange" />
                    </div>
                    <span>可回收物</span>
                </div>
                <div class="tab-item" :class="{ active: activeTab === 3 }" @click="activeTab = 3">
                    <div class="icon-wrap hazardous">
                        <van-icon name="warning-o" />
                    </div>
                    <span>有害垃圾</span>
                </div>
            </div>

            <!-- 厨余垃圾内容展示 -->
            <div class="category-content" v-if="activeTab === 0">
                <div class="content-desc">
                    <p>容易腐烂的生物质废弃物，包括剩饭剩菜、过期食品、瓜皮果核、花卉绿植等。</p>
                </div>
                <div class="food-examples">
                    <div class="food-item" v-for="(food, index) in kitchenWasteExamples" :key="index">
                        <div class="food-image">
                            <van-icon :name="food.icon" size="50" />
                        </div>
                        <div class="food-name">{{ food.name }}</div>
                    </div>
                </div>

                <div class="disposal-guide">
                    <h3>投放指南</h3>
                    <p>沥干水分后投放，纯流质垃圾（如牛奶）可直接倒进下水口。大骨头、生蚝壳、椰子壳等不是厨余垃圾，而是其他垃圾。</p>
                </div>

                <div class="environmental-note">
                    <p>美团外卖青山计划呼吁大家保护地球家园，从每一餐餐后的垃圾分类开始。<span class="more-link">了解更多 ></span></p>
                </div>

                <div class="source-info">
                    <p>华东师范大学生态与环境科学学院联合发布</p>
                    <p>如何找到我：美团/美团外卖-我的-垃圾分类（分类仅供参考）</p>
                </div>
            </div>
            
            <!-- 其他垃圾内容将在后续实现... -->
            <div class="category-content" v-if="activeTab === 1">
                <div class="content-desc">
                    <p>可回收物、有害垃圾、湿垃圾以外的其他生活废弃物，包括受污染的一次性外卖餐盒、使用过的纸巾、使用过的一次性餐具包等。</p>
                </div>
                <div class="food-examples">
                    <div class="food-item" v-for="(item, index) in otherWasteExamples" :key="index">
                        <div class="food-image other-waste-icon">
                            <van-icon :name="item.icon" size="50" />
                        </div>
                        <div class="food-name">{{ item.name }}</div>
                    </div>
                </div>
                
                <div class="disposal-guide">
                    <h3>投放指南</h3>
                    <p>沥干水分后投放，有油污的一次性外卖包装为其他垃圾，难以辨别类别的垃圾可投入其他垃圾。</p>
                </div>
                
                <div class="environmental-note">
                    <p>美团外卖青山计划呼吁大家保护地球家园，从每一餐餐后的垃圾分类开始。<span class="more-link">了解更多 ></span></p>
                </div>
                
                <div class="source-info">
                    <p>华东师范大学生态与环境科学学院联合发布</p>
                    <p>如何找到我：美团/美团外卖-我的-垃圾分类（分类仅供参考）</p>
                </div>
            </div>

            <!-- 添加可回收物内容展示 -->
            <div class="category-content" v-if="activeTab === 2">
                <div class="content-desc">
                    <p>适宜回收、可循环利用的废弃物，包括纸箱、报纸、易拉罐、塑料瓶、洁净的塑料餐盒等。</p>
                </div>
                <div class="food-examples">
                    <div class="food-item" v-for="(item, index) in recyclableExamples" :key="index">
                        <div class="food-image recyclable-icon">
                            <van-icon :name="item.icon" size="50" />
                        </div>
                        <div class="food-name">{{ item.name }}</div>
                    </div>
                </div>
                
                <div class="disposal-guide">
                    <h3>投放指南</h3>
                    <p>废纸投放时避免揉团；饮品塑料杯、外卖塑料餐盒、瓶罐等，请清洁后投放。</p>
                </div>
                
                <div class="environmental-note">
                    <p>美团外卖青山计划呼吁大家保护地球家园，从每一餐餐后的垃圾分类开始。<span class="more-link">了解更多 ></span></p>
                </div>
                
                <div class="source-info">
                    <p>华东师范大学生态与环境科学学院联合发布</p>
                    <p>如何找到我：美团/美团外卖-我的-垃圾分类（分类仅供参考）</p>
                </div>
            </div>

            <!-- 添加有害垃圾内容展示 -->
            <div class="category-content" v-if="activeTab === 3">
                <div class="content-desc">
                    <p>对人体健康或自然环境造成直接或潜在危害的生活垃圾，包括过期药品、废弃虫剂、废灯管、废电池等。</p>
                </div>
                <div class="food-examples">
                    <div class="food-item" v-for="(item, index) in hazardousExamples" :key="index">
                        <div class="food-image hazardous-icon">
                            <van-icon :name="item.icon" size="50" />
                        </div>
                        <div class="food-name">{{ item.name }}</div>
                    </div>
                </div>
                
                <div class="disposal-guide">
                    <h3>投放指南</h3>
                    <p>易破损的请打包固定后投放，易挥发的（如过期药液）请密封后投放。</p>
                </div>
                
                <div class="environmental-note">
                    <p>美团外卖青山计划呼吁大家保护地球家园，从每一餐餐后的垃圾分类开始。<span class="more-link">了解更多 ></span></p>
                </div>
                
                <div class="source-info">
                    <p>华东师范大学生态与环境科学学院联合发布</p>
                    <p>如何找到我：美团/美团外卖-我的-垃圾分类（分类仅供参考）</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { Icon, Search } from 'vant';

export default {
    name: 'GarbageClassification',
    components: {
        [Icon.name]: Icon,
        [Search.name]: Search
    },
    data() {
        return {
            searchValue: '',
            activeTab: 0,
            hasMascotImage: false,
            quickTags: [
                '外卖餐盒',
                '小龙虾',
                '塑料袋',
                '喝过的奶茶杯'
            ],
            kitchenWasteExamples: [
                { name: '肉夹馍', icon: 'new-arrival-o' },
                { name: '面', icon: 'hot-o' },
                { name: '米饭', icon: 'hot-sale-o' },
                { name: '汉堡', icon: 'points' },
                { name: '小笼包', icon: 'thumb-circle-o' },
                { name: '炒菜', icon: 'hot-o' },
                { name: '蛋糕甜点', icon: 'like-o' },
                { name: '花卉', icon: 'flower-o' },
                { name: '鸡蛋壳', icon: 'circle' },
                { name: '香蕉皮', icon: 'after-sale' },
                { name: '苹果核', icon: 'smile-o' },
                { name: '虾蟹壳', icon: 'shield-o' }
            ],
            otherWasteExamples: [
                { name: '污损餐盒', icon: 'cart-o' },
                { name: '塑料袋', icon: 'bag-o' },
                { name: '一次性筷子', icon: 'pause-circle-o' },
                { name: '用过的纸杯', icon: 'close' },
                { name: '一次性餐具', icon: 'shopping-cart-o' },
                { name: '用过的牙签', icon: 'minus' },
                { name: '污损纸巾', icon: 'notes-o' },
                { name: '湿纸巾', icon: 'description' },
                { name: '粽子叶', icon: 'flower-o' },
                { name: '大骨头', icon: 'ellipsis' },
                { name: '硬水果壳', icon: 'circle' },
                { name: '硬贝壳', icon: 'certificate' }
            ],
            recyclableExamples: [
                { name: '纸箱', icon: 'gift-card-o' },
                { name: '报纸', icon: 'newspaper-o' },
                { name: '信封', icon: 'envelop-o' },
                { name: '洁净的纸袋', icon: 'bag-o' },
                { name: '洁净塑料盒', icon: 'send-gift-o' },
                { name: '洁净塑料杯', icon: 'coupon-o' },
                { name: '易拉罐', icon: 'balance-o' },
                { name: '塑料瓶', icon: 'vip-card-o' },
                { name: '玻璃瓶', icon: 'gem-o' },
                { name: '宣传单', icon: 'label-o' },
                { name: '衣服', icon: 'gift-o' },
                { name: '毛绒玩具', icon: 'smile-o' }
            ],
            hazardousExamples: [
                { name: '过期药品', icon: 'warning-o' },
                { name: '药品包装', icon: 'cluster-o' },
                { name: '滴眼液', icon: 'eye-o' },
                { name: '水银体温计', icon: 'warning' },
                { name: '废弃灯泡', icon: 'bulb-o' },
                { name: '消毒剂', icon: 'clear' },
                { name: '充电电池', icon: 'stop-circle-o' },
                { name: '蓄电池', icon: 'stop' },
                { name: '指甲油瓶', icon: 'brush-o' },
                { name: '纽扣电池', icon: 'circle' },
                { name: '荧光棒', icon: 'bulb-o' },
                { name: '染发剂罐', icon: 'revoke' }
            ]
        };
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        },
        onSearch() {
            console.log('搜索:', this.searchValue);
            // 实现搜索逻辑
        },
        onTagClick(tag) {
            this.searchValue = tag;
            // 跳转到搜索结果页面
            this.$router.push({
                path: '/garbage/search',
                query: { q: tag }
            });
        },
        showFoodDetail(food) {
            console.log('显示详情:', food.name);
            // 实现详情展示逻辑
        },
        // 删除不再需要的图片错误处理方法
        handleImageError() {},
        handleItemImageError() {},
        onSearchBoxClick() {
            // 跳转到搜索结果页面
            this.$router.push({
                path: '/garbage/search',
                query: { q: this.searchValue }
            });
        }
    }
};
</script>

<style lang="less" scoped>
.page {
    width: 750px;
    margin: 0 auto;
    background: #f5f5f5;
    min-height: 100vh;
    padding-bottom: 100px;
}

.nav-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 88px;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 32px;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    width: 750px;
    margin: 0 auto;

    .left-icon {
        width: 50px;
    }
    
    .title {
        flex: 1;
        font-size: 36px;
        font-weight: 500;
        text-align: center;
    }
    
    .share-btn {
        width: 117px;
        font-size: 30px;
        color: #333;
        text-align: left;
    }
}

.content {
    margin-top: 108px;
    padding: 0 0 80px;
    background-color: #fff;
}

.banner {
    background: linear-gradient(to right, #fff4d4, #ffecb3);
    padding: 40px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .banner-text {
        h1 {
            font-size: 46px;
            color: #a67c52;
            margin: 0 0 20px;
            font-weight: bold;
        }
        
        p {
            font-size: 28px;
            color: #a67c52;
            margin: 0;
        }
    }
    
    .banner-image {
        width: 200px;
        height: 200px;
        
        .mascot-placeholder {
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
        }
    }
}

.search-box {
    padding: 24px 32px 0;
    
    :deep(.van-search) {
        padding: 0;
        background: transparent;
    }
    
    :deep(.van-search__content) {
        border-radius: 36px;
        background: #f8f8f8;
        height: 88px;
        padding: 0 24px;
        display: flex;
        align-items: center;
    }
    
    :deep(.van-field__control) {
        height: 88px;
        line-height: 88px;
    }
    
    :deep(.van-icon-search) {
        font-size: 36px;
        line-height: 88px;
        display: flex;
        align-items: center;
    }
    
    :deep(.van-field__left-icon) {
        display: flex;
        align-items: center;
        height: 100%;
    }
}

.quick-tags {
    padding: 24px 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    
    .tag {
        padding: 12px 24px;
        background: #f8f8f8;
        border-radius: 36px;
        font-size: 26px;
        color: #333;
        
        &:active {
            background: #f0f0f0;
        }
    }
}

.guide-section {
    margin: 0 32px 24px;
    background: #fff;
    border-radius: 16px;
    padding: 32px;
    
    h2 {
        font-size: 32px;
        margin: 0 0 24px;
        font-weight: bold;
    }
    
    p {
        font-size: 28px;
        line-height: 1.6;
        margin: 0;
        color: #666;
    }
}

.category-tabs {
    display: flex;
    justify-content: space-around;
    background: #fff;
    padding: 24px 0;
    margin-bottom: 24px;
    border-bottom: 1px solid #f0f0f0;
    
    .tab-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        
        .icon-wrap {
            width: 64px;
            height: 64px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            
            &.kitchen-waste {
                color: #4d8e64;
                border: 2px solid #4d8e64;
            }
            
            &.other-waste {
                color: #333;
                border: 2px solid #333;
            }
            
            &.recyclable {
                color: #1a6ca8;
                border: 2px solid #1a6ca8;
            }
            
            &.hazardous {
                color: #e05b5b;
                border: 2px solid #e05b5b;
            }
            
            .van-icon {
                font-size: 36px;
            }
        }
        
        span {
            font-size: 28px;
            color: #333;
        }
        
        &.active {
            .icon-wrap {
                &.kitchen-waste {
                    background-color: #4d8e64;
                    color: #fff;
                }
                
                &.other-waste {
                    background-color: #333;
                    color: #fff;
                }
                
                &.recyclable {
                    background-color: #1a6ca8;
                    color: #fff;
                }
                
                &.hazardous {
                    background-color: #e05b5b;
                    color: #fff;
                }
            }
            
            span {
                font-weight: bold;
            }
        }
    }
}

.category-content {
    background: #fff;
    padding: 32px;
    
    .content-desc {
        padding-bottom: 24px;
        border-bottom: 1px solid #f5f5f5;
        
        p {
            font-size: 28px;
            line-height: 1.6;
            color: #666;
            margin: 0;
        }
    }
    
    .food-examples {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 32px;
        padding: 32px 0;
        
        .food-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            
            .food-image {
                width: 120px;
                height: 120px;
                border-radius: 8px;
                overflow: hidden;
                margin-bottom: 12px;
                background-color: #f8f8f8;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            
            .food-name {
                font-size: 26px;
                color: #333;
                text-align: center;
            }
        }
    }
    
    .disposal-guide {
        background: #f9f9f9;
        padding: 24px;
        border-radius: 12px;
        margin-top: 24px;
        
        h3 {
            font-size: 30px;
            margin: 0 0 16px;
            font-weight: bold;
        }
        
        p {
            font-size: 28px;
            line-height: 1.6;
            color: #666;
            margin: 0;
        }
    }
    
    .environmental-note {
        margin-top: 40px;
        padding: 20px 0;
        border-top: 1px solid #f0f0f0;
        
        p {
            font-size: 28px;
            line-height: 1.6;
            color: #666;
            
            .more-link {
                color: #4d8e64;
            }
        }
    }
    
    .source-info {
        margin-top: 20px;
        text-align: center;
        
        p {
            font-size: 24px;
            line-height: 1.6;
            color: #999;
            margin: 8px 0;
        }
    }

    .food-image .van-icon {
        color: #4d8e64; // 厨余垃圾图标颜色（默认）
        font-size: 50px;
    }
}

.other-waste-icon .van-icon {
    color: #333 !important;
}

.recyclable-icon .van-icon {
    color: #1a6ca8 !important;
}

.hazardous-icon .van-icon {
    color: #e05b5b !important;
}
</style> 